html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-hyphens: auto;
    /* Safari/Chrome */
    -ms-hyphens: auto;
    /* IE/Edge */
    hyphens: auto;
    /* Padrão (Firefox/Chrome moderno) */
    /* Garante quebra de palavras longas mesmo sem hifenização */
    word-wrap: break-word;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background-color: #FCF7CF;
    color: #FCF7CF;
    font-family: 'Jost';
}
.cabecalho {
  display: grid;
  grid-template-columns: 1fr 14fr 1fr;
}

.link-logo-omu {
  margin-left: 0;
}

.logo-omu {
  width: 6vw;
  height: auto;
  margin: 2.5vh 2vw 0 4vw;
}

.link-login {
    color: #F95E3E;
    font-weight: 700;
}

#trocar-dispositivo{
  grid-column: 3;
  justify-self: end;
  align-self: start;
  margin-top: 1vh;
  width: auto;  
    margin-left: auto;  
}


#trocar-dispositivo img{
  width: 55%;
  display: block;
  cursor: pointer;
  margin-left: auto;
}

.menu-navegacao {
  display: flex;
  justify-content: space-evenly;
  width: 82vw;
  font-size: 1.5em;
  margin: 4vh 0vw 0 0;
}

.link-logo-omu {
    margin-left: 0vw;
}

.span-vermelho {
    color: #F95E3E;
    font-weight: 900;
}

.span-azul {
    color: #3856F8;
    font-weight: 900;
}

.span-amarelo {
    color: #F8BA1B;
    font-weight: 900;
}

.span-branco {
    color: #ffffff;
    font-weight: 900;
}

.span-rosa {
    color: #F89EDA;
    font-weight: 900;

}


.l1,
.l2,
.l3,
.l4 {
    font-weight: 500;
    font-family: 'Jost';
}

.l1:hover {
    color: #F95E3E;
    text-decoration: none;
}

.l2:hover {
    color: #3856F8;
    text-decoration: none;
}

.l3:hover {
    color: #F89EDA;
    text-decoration: none;
}

.l4:hover {
    color: #F8BA1B;
    text-decoration: none;
}

.link-login:hover {
    color: #000000;
    text-decoration: none;
}

a {
    text-decoration: none;
    color: #000000;
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    border: none;
    outline: none;
}

h1 {
    text-align: center;
}

/*BLOCO DAS CORES*/
/*
Azul Escuro: 092BEC
Rosa Escuro: F78DD4
Vermelho Escuro: F84825
Amarelo Escuro: EDAC07

azul claro: 7589fa
rosa claro: fbc6e9
vermelho claro: fb8b74
amarelo claro: facf61
*/
.cores-omu {
    margin: 8vh 4vw 0 4vw;
    font-weight: 900;
}

.fileira-branco-cinza-preto {
    display: grid;
    grid-template-columns: 3fr 2fr 3fr;
    height: 10vh;
}

.fileira-bege {
    display: grid;
    grid-template-columns: 2fr 4fr 2fr;
    height: 10vh;
}

.cores-base {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    height: 40vh;
}

.cores-variacoes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    height: 10vh;
}

.omu-branco {
    background-color: #FFFFFF;
    color: #000000;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.omu-cinza {
    background-color: #323232;
    color: #FCF7CF;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.omu-preto {
    background-color: #000000;
    color: #FCF7CF;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.omu-azul {
    background-color: #3856F8;
    color: #FCF7CF;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.omu-rosa {
    background-color: #F89EDA;
    color: #FCF7CF;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.omu-vermelho {
    background-color: #F95E3E;
    color: #FCF7CF;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.omu-amarelo {
    background-color: #F8BA1B;
    color: #FCF7CF;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.omu-azul-claro {
    background-color: #7589FA;
    color: #FCF7CF;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.omu-azul-escuro {
    background-color: #092BEC;
    color: #FCF7CF;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.omu-rosa-claro {
    background-color: #FBC6E9;
    color: #FCF7CF;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.omu-rosa-escuro {
    background-color: #F78DD4;
    color: #FCF7CF;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.omu-vermelho-claro {
    background-color: #FB8B74;
    color: #FCF7CF;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.omu-vermelho-escuro {
    background-color: #F84825;
    color: #FCF7CF;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.omu-amarelo-claro {
    background-color: #FACF61;
    color: #FCF7CF;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.omu-amarelo-escuro {
    background-color: #EDAC07;
    color: #FCF7CF;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.omu-bege {
    background-color: #fcf7cf;
    color: #000000;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.omu-bege-claro {
    background-color: #fefcec;
    color: #000000;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.omu-bege-escuro {
    background-color: #faf2b2;
    color: #000000;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logos-omu {
    margin: 0 4vw 0 4vw;
    color: #000000;
    text-align: justify;
    font-size: 1.2em;
}

.box-logos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4vw;
    margin-top: 5vh;
    align-items: stretch;
}

.logo-img {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    row-gap: 3vh;
}

.logo-img>img {
    /* escolha um tamanho consistente e responsivo */
    height: clamp(10vh);
    width: 90%;

    /* mantém proporção e evita distorção */
    aspect-ratio: 3 / 1;
    height: auto;
    object-fit: contain;

    /* garante centralização visual */
    display: block;
}

.logo-img p {
    margin: 0 8vw;
    max-height: 18vh;
    overflow: auto;
    flex: 1;
}

.logo-img a {
    margin-top: auto;
    /* garante botão no final */
}

.botao-azul {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #3856F8;
    border: 1px solid #3856F8;
    border-radius: 10px;

    padding: 1vh 4vw 1vh 4vw;
    font-weight: 800;
    text-align: center;
    color: #FCF7CF;
    cursor: pointer;

    font-size: 1.45em;
}

.botao-rosa {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #F89EDA;
    border: 1px solid #F89EDA;
    border-radius: 10px;

    padding: 1vh 4vw 1vh 4vw;
    font-weight: 800;
    text-align: center;
    color: #FCF7CF;
    cursor: pointer;

    font-size: 1.45em;
}

.botao-vermelho {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #F95E3E;
    border: 1px solid #F95E3E;
    border-radius: 10px;

    padding: 1vh 4vw 1vh 4vw;
    font-weight: 800;
    text-align: center;
    color: #FCF7CF;
    cursor: pointer;

    font-size: 1.45em;
}

.botao-amarelo {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #F8BA1B;
    border: 1px solid #F8BA1B;
    border-radius: 10px;

    padding: 1vh 4vw 1vh 4vw;
    font-weight: 800;
    text-align: center;
    color: #FCF7CF;
    cursor: pointer;

    font-size: 1.45em;
}

.fontes-omu {
    color: #000000;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    margin: 6vh 4vw 0vh 4vw;
    text-align: justify;
    font-size:1.1em;
    row-gap: 2vh;
}

.jost-colorido {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    font-size: 4em;
}

.nimbus-colorido {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    align-content: center;
    font-size: 2.75em;

}

.txt-azul {
    color: #3856F8;
    font-weight: 700;
}

.txt-rosa {
    color: #F89EDA;
    font-weight: 700;
}

.txt-vermelho {
    color: #F95E3E;
    font-weight: 700;
}

.txt-amarelo {
    color: #F8BA1B;
    font-weight: 700;
}

.txt-azul-nimbus {
    color: #3856F8;
    font-weight: 300;
    font-family: 'Nimbus Sans L';
}

.txt-rosa-nimbus {
    color: #F89EDA;
    font-weight: 300;
    font-family: 'Nimbus Sans L';
}

.txt-vermelho-nimbus {
    color: #F95E3E;
    font-weight: 300;
    font-family: 'Nimbus Sans L';
}

.txt-amarelo-nimbus {
    color: #F8BA1B;
    font-weight: 300;
    font-family: 'Nimbus Sans L';
}

.fontes-omu p {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Nimbus Sans L';
    padding: 4vw;
}

.fontes-omu a {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    height: 10vh;
}

#menor {
    height: 5vh;
}

.p-preto {
    color: #000000;
    font-weight: 300;
    font-size: 1.2em;
}

.p-margem {
    margin: 5vh 4vw 0vh 4vw;
}

body p {
    font-family: 'Nimbus Sans L';
    text-align: justify;
}

.botao-rosa:hover {
    background-color: #F78DD4;
}

.botao-amarelo:hover {
    background-color: #EDAC07;
}

.botao-azul:hover {
    background-color: #092BEC;
}

.botao-vermelho:hover {
    background-color: #F84825;
}


/* =========================
   Footer
========================= */
footer {
    background-color: #3856F8;
    color: #fff;
    font-family: "Jost", sans-serif;
    font-weight: 300;
    width: 100%;
}

.faixa {
    width: 100vw;
    height: auto;
}

footer h1 {
    font-size: x-large;
    font-weight: 700;
}

footer h3 {
    font-family: "Jost", arial;
    font-optical-sizing: auto;
    font-weight: 700;
}

/* Container 2 colunas */
.div-pai-footer {
    display: flex;
    align-items: stretch;
    /* importante: iguala a altura das colunas */
    width: 100%;
}

/* Só as duas colunas diretas ganham largura/margem */
footer .div-pai-footer>div {
    width: 42vw;
    margin: 2.5vw 4vw;
}

/* Colunas: grid (topo cresce, base fica no fundo) */
.flexionar,
.logos {
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 0;
}

.footer-top {
    min-height: 0;
}

.texto-omu-footer {
    font-family: "Nimbus Sans L", sans-serif;
    text-align: justify;
}

/* Redes sociais (base esquerda) */
.linha-redes-sociais {
    align-self: end;
    /* cola no bottom da coluna */
    display: flex;
    align-items: flex-end;
    gap: 1vw;
    margin: 0;
    /* sem margens “roubando” o bottom */
}

.icone-rede-social {
    height: 4vh;
    width: auto;
}

/* Apoio (base direita) */
.box-apoiadores {
    align-self: end;
    /* cola no bottom da coluna */
    margin: 0;
}

.enfileirar {
    display: flex;
    flex-direction: row;
    margin: 0;
}

.coluna {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 1vw 0 0;
    width: auto;
}

.box-apoiadores a {
    display: block;
    line-height: 0;
}

.logo-grande {
    height: 10vh;
    width: auto;
    margin: 0 1vw 0 0;
}

.logo-metade {
    height: 6vh;
    width: auto;
    display: block;
}

.logo-grande-fit {
    height: 12vh;
    width: auto;
    display: block;
}

.titulo-omu {
    text-align: left;
}

.elementos-livres {
    margin: 5vh 4vw 15vh 4vw;
}

.linha1 {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr;
    justify-content: space-around;
    row-gap: 4vh;
     justify-items: center;
}

.bola {
    height: 20vh;
    width: auto;
    justify-self:center;
}

.faixa-exemplo {
    height: 20vh;
    width: auto;
    justify-self:center;
}

.fundo-azul {
    background-color: #3856F8;
}

.fundo-vermelho {
    background-color: #F95E3E;
}

.fundo-rosa {
    background-color: #F89EDA;
}

.fundo-amarelo {
    background-color: #F8BA1B;
}

#btn-linha1{
    width: 90%;
    padding: 0;

}
 
.btn{
    justify-self: center;
    height: 5vh;
    width: 50%;
    font-weight: 700;
    font-size: 1.25em;
    font-family: 'Jost';
    color: #FCF7CF;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grande{
    width: 70%;
}

.dropdown{
  position: relative;
  display: inline-block;
}

.dropdown-content{
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 999;
  text-align: center;

  min-width: 0;     
  width: 100%;      
  box-sizing: border-box;

  background: #FCF7CF;
  border: 1px solid #000;
  border-radius: 10px;
  padding: 10px;
}

.dropdown.open .dropdown-content{
  display: block;
}

.dropdown-content a{
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: #000;
  font-weight: 400;
  width: 100%;
  min-width: 0;   /* importante: cancela o min-width fixo */
  box-sizing: border-box;
}

.dropdown-content a:hover{
  background-color:#faf2b2;
  text-decoration: none;
}

.dropdown > .botao-azul,
.dropdown > .botao-rosa,
.dropdown > .botao-vermelho,
.dropdown > .botao-amarelo{
  width: 100%;
  display: block;
}

button{
    font-family: 'Jost';
}